<template>
  <div class="app-container">
    <div class="page-header">
      <!-- <router-link class="back-link" to="/main/renshi/renshizhidu/rsdangangl/rsdangangl">
                <i class="el-icon-arrow-left"></i>
                返回
            </router-link> -->
      <el-button
        type="primary"
        style="margin-right: 20px"
        @click="$router.push('/main/renshi/renshizhidu/rsdangangl/rsdangangl')"
        icon="el-icon-back"
        >返回</el-button
      >

      <h2>人事档案管理手册列表</h2>
    </div>
    <!-- 搜索区域 -->
    <div class="filter-container">
      <!-- <div class="left-buttons"> -->
      <!-- <el-button icon="el-icon-back" @click="goBack">返回</el-button> -->
      <!-- </div> -->
      <div class="right-buttons">
        <el-input
          v-model="listQuery.employeeName"
          placeholder="姓名"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.employeeNumber"
          placeholder="工号"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >
          搜索
        </el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          @click="handleCreate"
        >
          新增
        </el-button>
        <el-button
          class="filter-item"
          type="danger"
          icon="el-icon-delete"
          @click="handleBatchDelete"
        >
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="事业部" prop="businessUnit" />
      <el-table-column label="部门" prop="department" />
      <el-table-column label="姓名" prop="employeeName" />
      <el-table-column label="性别" prop="gender" />
      <el-table-column label="工号" prop="employeeNumber" />
      <el-table-column label="入职日期" prop="entryDate" />
      <el-table-column label="籍贯" prop="nativePlace" />
      <el-table-column label="档案编号" prop="archiveNumber" />
      <el-table-column label="操作" align="center" width="230">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleView(row)">
            查看
          </el-button>
          <el-button type="success" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <!-- 表单对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form ref="dataForm" :model="temp" :rules="rules" label-width="100px">
        <el-form-item label="事业部" prop="businessUnit">
          <el-input
            v-model="temp.businessUnit"
            :disabled="dialogType === 'view'"
          />
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-input
            v-model="temp.department"
            :disabled="dialogType === 'view'"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="employeeName">
          <el-input
            v-model="temp.employeeName"
            :disabled="dialogType === 'view'"
          />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="temp.gender" :disabled="dialogType === 'view'">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="employeeNumber">
          <el-input
            v-model="temp.employeeNumber"
            :disabled="dialogType === 'view'"
          />
        </el-form-item>
        <el-form-item label="入职日期" prop="entryDate">
          <el-date-picker
            v-model="temp.entryDate"
            type="date"
            placeholder="选择日期"
            :disabled="dialogType === 'view'"
          />
        </el-form-item>
        <el-form-item label="籍贯" prop="nativePlace">
          <el-input
            v-model="temp.nativePlace"
            :disabled="dialogType === 'view'"
          />
        </el-form-item>
        <el-form-item label="档案编号" prop="archiveNumber">
          <el-input
            v-model="temp.archiveNumber"
            :disabled="dialogType === 'view'"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button v-if="dialogType !== 'view'" type="primary" @click="saveData"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPersonnelArchivePage,
  saveOrUpdateBatchPersonnelArchive,
  getPersonnelArchiveById,
  deletePersonnelArchive,
  batchDeletePersonnelArchive,
} from "@/api/personnelArchive";
import Pagination from "@/components/Pagination";

export default {
  name: "PersonnelArchiveList",
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        employeeName: undefined,
        employeeNumber: undefined,
      },
      selectedRows: [],
      dialogVisible: false,
      dialogType: "", // 'create', 'edit', 'view'
      temp: {
        id: undefined,
        businessUnit: "",
        department: "",
        employeeName: "",
        gender: "",
        employeeNumber: "",
        entryDate: "",
        nativePlace: "",
        archiveNumber: "",
      },
      rules: {
        businessUnit: [
          { required: true, message: "请输入事业部", trigger: "blur" },
        ],
        department: [
          { required: true, message: "请输入部门", trigger: "blur" },
        ],
        employeeName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        employeeNumber: [
          { required: true, message: "请输入工号", trigger: "blur" },
        ],
        entryDate: [
          { required: true, message: "请选择入职日期", trigger: "change" },
        ],
        archiveNumber: [
          { required: true, message: "请输入档案编号", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    dialogTitle() {
      const typeMap = {
        create: "新增人事档案",
        edit: "编辑人事档案",
        view: "查看人事档案",
      };
      return typeMap[this.dialogType];
    },
  },
  created() {
    this.getList();
  },
  methods: {
    goBack() {
      this.$router.push("/main/renshi/renshizhidu/rsdangangl/rsdangangl");
    },
    getList() {
      this.listLoading = true;
      getPersonnelArchivePage(this.listQuery).then((response) => {
        console.log(response);
        this.list = response.data.data.records;
        this.total = response.data.data.total;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        businessUnit: "",
        department: "",
        employeeName: "",
        gender: "",
        employeeNumber: "",
        entryDate: "",
        nativePlace: "",
        archiveNumber: "",
      };
    },
    handleCreate() {
      this.$router.push({
        path: "/main/renshi/renshizhidu/rsdangangl/rsdangangl",
        query: { type: "create" },
      });
    },
    handleView(row) {
      this.$router.push({
        path: "/main/renshi/renshizhidu/rsdangangl/rsdangangl",
        query: { type: "view", id: row.id },
      });
    },
    handleUpdate(row) {
      this.$router.push({
        path: "/main/renshi/renshizhidu/rsdangangl/rsdangangl",
        query: { type: "edit", id: row.id },
      });
    },
    handleDelete(row) {
      this.$confirm("确认删除该记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deletePersonnelArchive(row.id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        });
      });
    },
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    handleBatchDelete() {
      if (this.selectedRows.length === 0) {
        this.$message({
          message: "请选择要删除的记录",
          type: "warning",
        });
        return;
      }
      this.$confirm("确认删除选中的记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const ids = this.selectedRows.map((row) => row.id);
        batchDeletePersonnelArchive(ids).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        });
      });
    },
    saveData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          saveOrUpdateBatchPersonnelArchive([this.temp]).then(() => {
            this.$message({
              type: "success",
              message: this.dialogType === "create" ? "创建成功!" : "更新成功!",
            });
            this.dialogVisible = false;
            this.getList();
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  /* background-color: #f5f7fa; */
  border-radius: 8px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  min-height: calc(100vh - 40px);
  width: 1200px;
  margin: 0 auto;
}

/* 页面头部样式 */
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 3px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 返回链接样式 */
.back-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #409eff;
  font-size: 16px;
  margin-right: 20px;
  transition: all 0.3s;
}

.back-link i {
  margin-right: 5px;
}

.back-link:hover {
  opacity: 0.8;
}

/* 标题样式 */
.page-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: #303133;
}

.filter-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px 0px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.filter-item {
  margin-right: 10px;
}

.right-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.left-buttons {
  display: flex;
  align-items: center;
}
</style>